import Const from '@/common/Const';
import React, {Component} from 'react';

interface IMdEditor {
  id: string;
  width?: any;
  height?: any;
  defaultValue?: string;
  onRef: any;
  toolsBar?: Array<any>;
}

class MdEditor extends Component<IMdEditor, any> {
  constructor(props: any) {
    super(props);
    this.state = {
      value: ""
    }
  }

  md: any;

  componentDidMount() {
    this.props.onRef(this);
    let toolbars = this.props.toolsBar;
    // @ts-ignore
    let editor = editormd(this.props.id, {
      width: this.props.width ? this.props.width : "80%",
      height: this.props.height ? this.props.height : 600,
      placeholder: "请输入...",
      // disabledKeyMaps: ["F11"],//禁用全屏键
      // markdown: "xxxx",     // dynamic set Markdown text
      path: `/${Const.BASEDOMAINBACK}/editor.md/lib/`,  // Autoload modules mode, codemirror, marked... dependents libs path
      // path: `/back/editor.md/lib/`,  // Autoload modules mode, codemirror, marked... dependents libs path
      codeFold: true,
      toolbarIcons: function () {
        if (toolbars)
          return toolbars;
        return [
          "undo", "redo", "|",
          "bold", "del", "italic", "quote", "ucwords", "uppercase", "lowercase", "|",
          "link", "image", "code", "code-block", "|",
          "watch", "clear", "|",
          "help"
        ]
      },
      //syncScrolling : false,
      saveHTMLToTextarea: true,    // 保存 HTML 到 Textarea
      searchReplace: true,
      watch: true,                // 关闭实时预览
      htmlDecode: "style,script,iframe|on*",            // 开启 HTML 标签解析，为了安全性，默认不开启
      //toolbar  : false,             //关闭工具栏
      //previewCodeHighlight : false, // 关闭预览 HTML 的代码块高亮，默认开启
      emoji: false,
      taskList: true,
      tocm: true,         // Using [TOCM]
      tex: true,                   // 开启科学公式TeX语言支持，默认关闭
      flowChart: false,             // 开启流程图支持，默认关闭
      sequenceDiagram: false,       // 开启时序/序列图支持，默认关闭,
      //dialogLockScreen : false,   // 设置弹出层对话框不锁屏，全局通用，默认为true
      //dialogShowMask : false,     // 设置弹出层对话框显示透明遮罩层，全局通用，默认为true
      //dialogDraggable : false,    // 设置弹出层对话框不可拖动，全局通用，默认为true
      //dialogMaskOpacity : 0.4,    // 设置透明遮罩层的透明度，全局通用，默认值为0.1
      //dialogMaskBgColor : "#000", // 设置透明遮罩层的背景颜色，全局通用，默认为#fff
      imageUpload: true,
      imageFormats: ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
      imageUploadURL: "https://ilab.arvroffer.com/api/utils/v1/upload",
      // crossDomainUpload: true,
      // uploadCallbackURL: "https://ilab.arvroffer.com/api/utils/v1/upload"
    });
    this.md = editor;
    if (this.props.defaultValue) {
      this.setState({value: this.props.defaultValue});
    }
  }

  Submit = () => {
    const value = this.md.getMarkdown();
    return value;
  }
  Clear = () => {
    this.md?.clear();
  }
  ResetMarkdown = (value) => {
    if (value) {
      console.log(value);
      this.md?.setMarkdown(value);
    } else {
      this.Clear();
    }
  }

  render() {
    return (
      <div>
        <div id={this.props.id}>
                <textarea value={this.state.value} onChange={() => {
                }}>
                </textarea>
        </div>
      </div>
    );
  }
}

export default MdEditor;
